import React, { useEffect, useState } from "react";
import axios from "../../axios/axios";
import { marked } from "marked";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import "../../i18n";
function Booklist() {
  const { t, i18n } = useTranslation();
  const navigate = useNavigate();
  useEffect(() => {
    axios({
      url: "http://blogapi.shbwyz.com/article/list",
      method: "get",
    }).then((res) => {
      console.log(res);
      setBooklist(res.data.rows);
    });
  }, []);
  const [booklist, setBooklist] = useState([]);
  const toxq = (id: number) => {
    navigate("/xiangqing/" + id);
  };
  return (
    <div>
      {booklist &&
        booklist.map((item: any) => {
          return (
            <div
              onClick={() => toxq(item.id)}
              dangerouslySetInnerHTML={{ __html: marked(item.content) }}
            ></div>
          );
        })}
      <div>
        <button
          onClick={() =>
            i18n.changeLanguage(i18n.language == "en" ? "zh" : "en")
          }
        >
          {i18n.language == "en" ? "zh" : "en"}
        </button>
        <p>{t("hello")}</p>
      </div>
    </div>
  );
}

export default Booklist;
